<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%
	String path=request.getContextPath();
	String basePath=request.getScheme()+"://"
			+request.getServerName()+":"+request.getServerPort()
			+path+"/";
%>
<!DOCTYPE html>
<html>
<base href="<%=basePath%>">
<head>
	<title>题库</title>
	<meta charset="utf-8">
	<link rel="icon" href="img/logo.png" sizes="32x32">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/problem.css">
	<link rel="stylesheet" type="text/css" href="css/animate.min.css">
	<link rel="stylesheet" type="text/css" href="css/syalert.min.css">
	<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-toggle.min.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/popper.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/syalert.min.js"></script>
	<script src="layui/layui.js"></script>
	<style type="text/css">
		.img-circle{
			border-radius: 50%;
		}
		.dropdown-menu .link-myspace:hover{
			color:black;
		}
		.news {
			height:42px;
			background:#fff;
			overflow:hidden;
		}
		.news .t_news {
			height:42px;
			color:#2a2a2a;
			overflow:hidden;
			position:relative;
			/* width:500px; */
			left: 0;
		}
		.news .news_li, .swap {
			line-height:42px;
			display:inline-block;
			position:absolute;
			top:42px;
			right:0;
			font-size:14px;
			text-align:left;
			color:#585858;
			font-size: 18px;
		}
		.notice-title{
			float: left;
			line-height: 42px;
			font-size: 20px;
		}
	</style>
</head>
<body style="background:url('img/ba.png');background-size: auto;background-color: rgba(0,0,0,0.1);">
	<!-- 登录窗口 -->
	<div style="width: 350px;" class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert1">
		<div style="padding: 0 10px 10px 10px;">
			<div style="overflow: hidden;"><a href="javascript:;"  onclick="syalert.syhide('alert1')" style="color: black;float: right;"><i class="fa fa-times" aria-hidden="true"></i></a></div>
			<h3 align="center" style="font-size: 20px;font-weight: 700;" id="form_title">登录</h3>
	  		<hr>
	  		<!-- 登录form -->
	  		<form action="user/login" method="post" id="login_form">
				<input class="form-control" type="text" placeholder="用户名" autocomplete="off" tabindex="1" name="userName" id="username" />
				<div style="margin-top: 15px;"></div>
				<input class="form-control" type="password" placeholder="密码" autocomplete="off" tabindex="1" name="passWord" id="password" />
				<div style="margin-top: 15px;"></div>
				<div style="overflow: hidden;">
					<input class="form-control" type="text" placeholder="验证码" autocomplete="off" tabindex="1" name="checkCode" id="checkCode" style="width: 230px;float: left;border-right: none;border-top-right-radius: 0px;border-bottom-right-radius: 0px;" />
					<canvas id="canvas" style="width: 100px;height: 38px;float: right;border: 1px solid #ced4da;border-radius: 0.25rem;border-left: none;border-top-left-radius: 0px;border-bottom-left-radius: 0px;" width="100" height="47" onclick="dj()"></canvas>
				</div>
				<div style="overflow: hidden;">
					<a href="javascript:;" style="padding-top: 15px;float: right;text-decoration: none;font-size: 13px;color: #999999;" id="register">新用户注册</a>
				</div>
				<!-- 引入验证码 -->
				<script type="text/javascript" src="js/checkCode.js"></script>
				<div style="margin-top: 15px;"></div>
				<button type="submit" class="form-control btn btn-primary" id="sub_btn">登录</button>
			</form>
			<!-- 注册form -->
			<form action="user/register" method="post" id="register_form" style="display: none;">
				<input type="hidden" name="userName" id="username11">
				<input type="hidden" name="passWord" id="password11">
				<input type="hidden" name="userImg" value="header.jpg">
				<input class="form-control" type="text" placeholder="注册用户名" autocomplete="off" tabindex="1" name="userName1" id="username1" />
				<div style="margin-top: 15px;"></div>
				<input class="form-control" type="password" placeholder="注册密码" autocomplete="off" tabindex="1" name="passWord1" id="password1" />
				<div style="margin-top: 15px;"></div>
				<input class="form-control" type="password" placeholder="再次输入密码" autocomplete="off" tabindex="1" name="passWord2"  id="password2" />
				<div style="margin-top: 15px;"></div>
				<input class="form-control" type="email" placeholder="注册邮箱" autocomplete="off" tabindex="1" name="email" id="email" />
				<div style="overflow: hidden;">
					<a href="javascript:;" style="padding-top: 15px;float: right;text-decoration: none;font-size: 13px;color: #999999;" id="login">已有账号，去登录</a>
				</div>
				<div style="margin-top: 15px;"></div>
				<button type="submit" class="form-control btn btn-primary" id="sub_btn">注册</button>
			</form>
		</div>
	</div>
	<!-- 顶部导航 -->
	<div class="nav fixed-top">
		<div class="container">
			<div class="top-title"><span>OnlineJudge</span></div>
			<div class="top-list">
				<ul>
					<li class="active1"><a href="problem/list?pager.offset=0">题库</a></li>
					<li class=""><a href="solution/list?pager.offset=0">题解</a></li>
					<li class=""><a href="community/list?pager.offset=0">论坛</a></li>
				</ul>
			</div>
			<div class="top-last">
				<c:if test="${currentUser!=null }">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
	                    <img class="img-circle" src="${pageContext.request.contextPath }/img/${currentUser.getUserImg() }" style="margin: -5px;" width="35px">
	                    &nbsp;
	                    <strong id="id_user_username">${currentUser.getUserName() }</strong>
	                    <b class="caret"></b>
                	</a>
                	<ul class="dropdown-menu" style="width:50px;margin-top:16px;font-size: 13px;text-align: center">
                		<li style="padding: 0;"><hr style="margin:0;"><a class="link-myspace" href="user/myspace" style="font-size:14px;">个人中心</a></li>
                		<li style="padding: 0;"><hr style="margin:0;"><a class="btn btn-outline-primary btn-lg btn-block" role="button" href="user/logout" style="font-size:14px;">退出登录</a></li>
                    </ul>
				</c:if>
				<c:if test="${currentUser==null }">
					<a href="javascript:void(0);" onclick="syalert.syopen('alert1')" id="loginLink">登录/注册</a>
				</c:if>
			</div>
		</div>
	</div>

	<!-- 内容 -->
	<div class="container" style="margin-top: 70px;">
		<div class="panel panel-default">
			<div class="panel-body">
				<div class="noticeList">
					<div class="notice-title">公告：</div>
					<div class="notice-content">
						<div class="news">
						    <div class="t_news">
						        <ul class="news_li" style="left: 0;margin-top: 1px;">
						        	<c:forEach var="notice" items="${noticeList }">
						            <li>
										<span style="">${notice.getNoticeContent() }</span>
										<span style="float:right;">[${notice.getNoticeDate() }]</span>
									</li>
									</c:forEach>
						        </ul>
						        <ul class="swap"></ul>
						    </div>
						</div>
					</div>
				</div>
				<hr>
				<form class="form-inline row justify-content-center" style="margin-bottom: 20px;margin-top: 20px;" action="problem/list?pager.offset=0" method="post">
				  <div class="form-group mx-sm-3 mb-2">
				    <input type="text" class="form-control" id="queryContent" placeholder="搜索题目编号、题目名称" style="width: 400px;font-size: 14px;">
				  </div>
				  <button type="submit" class="btn btn-primary mb-2" style="font-size: 14px;">搜索</button>
				</form>
				<table class="table table-striped" style="font-size: 14px;">
				  <thead>
				    <tr>
				    	<c:if test="${currentUser!=null }">
				    	<th scope="col"></th>
				    	</c:if>
				      	<th scope="col">编号</th>
				      	<th scope="col">标题</th>
				      	<th scope="col">已通过</th>
				      	<th scope="col">分类</th>
				      	<th scope="col">难度</th>
				    </tr>
				  </thead>
				  <tbody>
				  	<c:forEach var="problem" items="${problemList }">
				    <tr>
				    	<c:if test="${currentUser!=null }">
				    	<td>
				    		<c:if test="${problem.getStatus() eq 'success' }">
				    		<i class="fa fa-check" aria-hidden="true" style="color: #5fba7d;font-size: 18px;"></i>
				    		</c:if>
				    		<c:if test="${problem.getStatus() eq 'error' }">
				    		<i class="fa fa-times" aria-hidden="true" style="color: red;font-size: 18px;"></i>
				    		</c:if>
				    	</td>
				    	</c:if>
				      	<td>${problem.getProblemId() }</td>
				      	<td><a href="problem/item?problemId=${problem.getProblemId() }">${problem.getProblemTitle() }</a></td>
				      	<td>${problem.getSuccessCount() }</td>
				     	<td>${problem.getProblemTypeName() }</td>
				     	<c:if test="${problem.getProblemLevelName() eq '简单' }">
				     	<td><span class="label label-success round">简单</span></td>
				     	</c:if>
				      	<c:if test="${problem.getProblemLevelName() eq '中等' }">
				     	<td><span class="label label-warning round">中等</span></td>
				     	</c:if>
				     	<c:if test="${problem.getProblemLevelName() eq '困难' }">
				     	<td><span class="label label-danger round">困难</span></td>
				     	</c:if>
				    </tr>
				    </c:forEach>
				  </tbody>
				</table>
				<nav aria-label="Page navigation example" class="row justify-content-center" style="font-size:14px;">
					<ul class="pagination">
						<pg:pager url="${requestScope.url}" items="${requestScope.total}" export="currentPageNumber=pageNumber" maxPageItems="10" maxIndexPages="4">
							<pg:first>
								<li class="page-item"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">首页</a></li>
						    </pg:first>
							<pg:prev>
								<li class="page-item"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">上一页</a></li>
			     			</pg:prev>
							<pg:pages>
								<c:choose>
									<c:when test="${currentPageNumber eq pageNumber}">
			        					<li class="page-item active"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">${pageNumber }</a></li>
			       					</c:when>
									<c:otherwise>
										<li class="page-item"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">${pageNumber }</a></li>
			       					</c:otherwise>
								</c:choose>
							</pg:pages>
							<pg:next>
								<li class="page-item"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">下一页</a></li>
			     			</pg:next>
							<pg:last>
								<li class="page-item"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">尾页</a></li>
			     			</pg:last>
						</pg:pager>
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/login_register.js"></script>
	<script type="text/javascript">
		
	</script>
	<c:if test="${LoginError!=null && currentUser==null}">
		<script type="text/javascript">
			layui.use('layer', function() {
				var layer = layui.layer;
				var $ = layui.jquery;
				layer.msg('用户名或密码错误', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
			});
		</script>
	</c:if>
	<c:if test="${RegisterError!=null&&RegisterSuccess==null}">
		<script type="text/javascript">
			layui.use('layer', function() {
				var layer = layui.layer;
				var $ = layui.jquery;
				layer.msg('该用户已注册过！请重新注册', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
			});
		</script>
	</c:if>
	<c:if test="${RegisterSuccess!=null}">
		<script type="text/javascript">
			layui.use('layer', function() {
				var layer = layui.layer;
				var $ = layui.jquery;
				layer.msg('注册成功', { icon: 1, time: 1000, shade: [0.6, '#000', true] });
			});
		</script>
	</c:if>
	<script type="text/javascript">
		//公告轮播
		x = $('.news_li');
		h = $('.news_li li').length * 42; 
		var hh = $('.news_li li').length;
		if (hh > 1)
		    b();
		if(hh==1){
			x.css("top","0px");
		}
		
		function b() {
		    t = parseInt(x.css('top'));
		    x.animate({
		        top: t - 42 + 'px'
		    }, 'slow'); 
		    if (Math.abs(t) == h - 84) { 
		        x.animate({
		            top: '0px'
		        }, 'slow');
		       
		    }
		    setTimeout(b, 5000);
		}
	</script>
	<!-- 没登录的话，模拟点击登录 -->
	<c:if test="${unLogin }">
	<script type="text/javascript">
		document.getElementById("loginLink").click();
	</script>	
	</c:if>
</body>
</html>